<template>
    <div>
        <input type="button" value="批量删除" @click="DelAll()">
        <input type="button" value="批量下架" @click="UpdAll(0)">
        <input type="button" value="批量上架" @click="UpdAll(1)">
    </div>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkAll"></td>
                    <td>项目名称</td>
                    <td>项目编号</td>
                    <td>押金</td>
                    <td>服务人数</td>
                    <td>服务时长</td>
                    <td>说明</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkOne"></td>
                    <td>{{ item.shopName }}</td>
                    <td>{{ item.showCord }}</td>
                    <td>{{ item.money }}</td>
                    <td>{{ item.people }}</td>
                    <td>{{ item.time }}</td>
                    <td>{{ item.shuom }}</td>
                    <td>{{ item.state == 1 ? "上架" : "下架" }}</td>
                    <td><input type="button" value="删除" @click="Del(item.id)">
                        <input type="button" value="上架" v-if="item.state == 0" @click="Upd(item.id, 1)">
                        <input type="button" value="下架" v-if="item.state == 1" @click="Upd(item.id, 0)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>{{ data.totalCount }}条</span>
        <span>{{ data.totalPage }}页</span>
        <span>{{ querinfo.index }}/{{ data.totalPage }}</span>
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(querinfo.index-1)">
        <input type="button" value="下一页" @click="page(querinfo.index+1)">
        <input type="button" value="首页" @click="page(data.totalPage)">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';

import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

let checked: any = ref(false)

let ids: any = ref([])
let querinfo: any = reactive({
    index: 1,
    size: 2,
    ShopName: ''
})
let data: any = reactive({
    "totalCount": '',
    "totalPage": '',
    "list": []
})
const page = (num: any) => {
    console.log(num);
    
    if (num < 1) {
        querinfo.index=1;
        return;
    }
    if(num>data.totalPage)
    {
        querinfo.index=data.totalPage
        return;
    }
    querinfo.index=num;
    lists();
    
}
const checkAll = () => {
    checked.value = !checked.value
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.id;
        })
    }
    else {
        ids.value = [];
    }
}
const checkOne = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}


onMounted(() => {
    lists();
})

const Del = (id: any) => {
    axios({
        url: '/api/Show/DelShop',
        method: 'delete',
        params: {
            id: id
        }
    })
        .then(res => {
            if (res.data >= 0) {
                alert("删除成功");
                checked.value = false;
                lists();
                return;
            }
            else {
                alert("删除失败");
                return;
            }
        })
}
const DelAll = () => {
    axios({
        url: '/api/Show/DelShopAll',
        method: 'delete',
        params: {
            ids: ids.value.toString(),

        }
    })
        .then(res => {
            if (res.data >= 0) {
                alert("批量删除成功");
                lists();
                return;
            }
            else {
                alert("删除失败");
                return;
            }
        })
}
const Upd = (id: any, state: any) => {
    axios({
        url: '/api/Show/UpdState',
        method: 'put',
        params: {
            id: id,
            state: state
        }
    })
        .then(res => {
            if (res.data >= 0) {
                alert("修改状态成功");
                lists();
                return;
            }
            else {
                alert("修改状态失败");
                return;
            }
        })
}
const UpdAll = (state: any) => {
    axios({
        url: '/api/Show/UpdStateAll',
        method: 'put',
        params: {
            ids: ids.value.toString(),
            state: state
        }
    })
        .then(res => {
            if (res.data >= 0) {
                alert("修改状态成功");
                checked.value = false;
                ids.value = [];
                lists();
                return;
            }
            else {
                alert("修改状态失败");
                return;
            }
        })
}
const lists = () => {
    axios({
        url: '/api/Show/ShopList',
        method: 'get',
        params: querinfo
    })
        .then(res => {
            console.log(res)
            Object.assign(data, res.data)
        })
}
</script>

<style scoped></style>